



<template>

  <el-container style="height: 870px;width: 100%">
    <el-header style="height: 10%;background-color: rgb(72,209,204);">
      <div style="background-color: rgb(72,209,204);width: 33%;height: 100%;float: left"></div>
      <div style="background-color: rgb(72,209,204);width: 34%;height: 100%;float: left"> <p style="color: #91959c;font-size: 23px;line-height: 23px;font-weight: bold;height: 40px">任务安排</p></div>
      <div style="background-color: rgb(72,209,204);width: 33%;height: 100%;float: left" >
        <el-button v-if="this.role==='company'" type="danger" plain  @click="jumpp()">添加任务</el-button>
        <el-button v-if="this.role==='company'" type="danger" plain  @click="jumppppp()">项目提交管理</el-button>
        <el-button v-if="this.role==='workroom'" type="danger" plain  @click="jumpppp()">提交任务</el-button>
        <el-button type="danger" plain  @click="jump('Index')">返回主页</el-button>
      </div>
    </el-header>
    <el-container style="height: 100%">
      <el-main style="padding: 0px">


        <template>
          <div id="myChart" ref="chart" style="width: 100%;height: 700px"></div>
        </template>










      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    updated(){
      this.changeView();
    },
    data() {
      return {
        oid:'',
        role:'',
        teamData:[
          {
            oid:'',
            id:'',
            price:'',
            demand:'',
            doc:'',
            photo:'',
            workroomName:'',
            puanduan:'',
          }
        ],
        ydata:[
          // '测试', '开发', '设计', '总进度','一般'
           ],
        startdata:[
          // new Date("2017/09/23"),
          // new Date("2017/09/10"),
          // new Date("2017/09/25"),
          // new Date("2017/09/1"),
          // new Date("2017/09/1"),
        ],
        finishdata:[],
        over:[],
        urgent:[],
        delay:[]
      }
    },
    mounted: function(){


      var user= JSON.parse(window.sessionStorage.getItem("user"));

      this.role=user.role

     this.oid= this.$route.query.mallCode

      // this.oid=7

  axios.post('/user/lookTask',{
    oid:this.oid,
    id:this.oid
  }).then((response) => {
    if( response.data != null){
      var e=response.data
      //console.log(e)
      var ydata=[];
      var startdata=[];
      var finishdata=[];
      var urgent=[];
      var delay=[]
      var over=[];
      for(var c=0;c<e.length;c++){
        var ee=e[c];


         ydata[c]=ee.name
        var aa=ee.startdate
        var aaa=aa.split("T")
        var aaaa=aaa[0]
        var bb=ee.finishdate
        var bbb=bb.split("T")
        var bbbb=bbb[0]
        startdata[c]=new Date(aaaa)
          if(ee.states===0){
            var bbbbb=bbbb+" 23:59:59"
            var endtime=this.timeDown (bbbbb)
            var timehh=endtime.split("天")
            console.log(timehh[0])
            var d=timehh[0]
            if(d>=20){
              finishdata[c]=new Date(bbbb)
              over[c]=new Date("-")
              urgent[c]=new Date("-")
              delay[c]=new Date("-")
            }else if(d>=0&&d<20){

              urgent[c]=new Date(bbbb)
              over[c]=new Date("-")
              finishdata[c]=new Date("-")
              delay[c]=new Date("-")

            }else{

              finishdata[c]=new Date("-")
              over[c]=new Date("-")
              urgent[c]=new Date("-")
              delay[c]=new Date(bbbb)


            }





          }else{
            finishdata[c]=new Date("-")
            over[c]=new Date(bbbb)
            urgent[c]=new Date("-")
            delay[c]=new Date("-")
          }





      }
      this.ydata=ydata
      this.startdata=startdata
      this.finishdata=finishdata
      this.over=over
      this.urgent=urgent
      this.delay=delay
      this.drawLine()



    }
  })








    },
    methods: {



      drawLine () {
        var barDv = this.$refs.chart;
        console.log(barDv)
        if (barDv) {
          console.log('bar_dv不为空');
          let myChart = this.$echarts.init(barDv)
          console.log(myChart)
          var option = {
            title: {
              text: '任务安排'
            },
            legend: {
              data: ['进行中的项目', '完成项目','紧急任务','延误任务']

            },
            xAxis: {
              type: 'time',
              position: "top"
            },

            yAxis: {
              type: "category",
              data: this.ydata

            },
            tooltip: {
              trigger: 'axis',
              formatter: function(params) {
                var res = params[0].name + "</br>"
                var date0 = params[0].data;
                var date1 = params[1].data;
                // var date2 = params[2].data;
                date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
                date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
                // date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
                res += params[0].seriesName + ":" + date0 + "</br>"
                res += params[1].seriesName + ":" + date1 + "</br>"
                // res += params[2].seriesName + ":" + date2 + "</br>"
                // console.log(params[0]);
                return res;
              }
            },
            series: [

              {
                name: '计划开始时间',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0)'
                  }
                },
                data: this.startdata
              },

              {
                name: '进行中的项目',
                type: 'bar',
                stack: '总量',
                data: this.finishdata
              },
              {
                name: '紧急任务',
                type: 'bar',
                stack: '总量',
                data: this.urgent
              },
              {
                name: '延误任务',
                type: 'bar',
                stack: '总量',
                data: this.delay
              },
            {
                name: '完成项目',
                type: 'bar',
                stack: '总量',
                data:this.over

              }
            ]
          };

          myChart.setOption(option);
        } else {
          console.log('bar_dv为空!');
        }
      },
      formate (time) {
        if(time>=10){
          return time
        }else{
          return `0${time}`
        }
      },
      timeDown (endTimes) {

        const endTime = new Date(endTimes)

        const nowTime = new Date();
        let leftTime = parseInt((endTime.getTime()-nowTime.getTime())/1000)
        let d = parseInt(leftTime/(24*60*60))
        let h = this.formate(parseInt(leftTime/(60*60)%24))
        let m = this.formate(parseInt(leftTime/60%60))
        let s = this.formate(parseInt(leftTime%60))
        // if(leftTime <= 0){
        //   this.flag = true
        //   this.$emit('time-end')
        // }

         var time = `${d}天${h}小时${m}分${s}秒`     // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
        return time
      },

      jumpppp(path) {

        this.$router.push({
          path: '/ProjectUploaddd',
          query: {
            mallCode: this.oid,
          }
        })


      },
      jumppppp(path) {

        this.$router.push({
          path: '/CProjectSubmit',
          query: {
            mallCode: this.oid,
          }
        })


      },


      jumppp(path) {
        console.log(path)
        this.$router.push({
          path: '/ChildProject',
          query: {
            mallCode: path,
          }
        })


      },

      jumpp(path) {
        this.$router.push({
          path: '/AddProcess',
          query: {
            mallCode: this.oid,
          }
        })


      },


        jump(path){
          this.$router.replace({path:path})
        },




    }}
</script>











<style >
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-header, .el-footer {
    color: #7c235b;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #c0c3bf;
    color: #333;
    line-height: 200px;
    font-size: 25px;
    font-weight: bold;
    text-align: left;
  }

  .el-main {
    background-color: #e0e4eb;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  . hh{
    height: 56px;
    line-height: 56px;
    position: relative;
    -webkit-box-sizing: border-box;
    white-space: nowrap;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-menu-item, .el-submenu__title {
    height: 56px;
    line-height: 56px;
    position: relative;
    -webkit-box-sizing: border-box;
    white-space: nowrap;
    padding-left: 100px;
    /*list-style-position: initial;*/
    list-style-type: initial ;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
